<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"></meta>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"></meta>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"></meta>
   	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>  
    <title>会话列表</title>
    <link rel="stylesheet" type="text/css" th:href="@{/chat/wxchat/static/css/mui.min.css}"></link>
    <style type="text/css">
        .mui-content>.mui-table-view:first-child {
            margin-top: 0;
        }
        /***群聊列表***/
        .chat-list .wechat-avatar {
            float: left;
            margin-right: 0.62999rem;
            line-height: 3rem;
            max-width: 3rem;
            height: 3rem;
        }
        .chat-list .wechat-avatar .mui-row {
            background-color: #dddee0;
            padding: 0.15rem;
            border-radius: 0.2rem;
            margin-left: -0.05rem;
            margin-right: -0.05rem;
        }
        .chat-list .wechat-avatar .mui-row [class*=mui-col-xs-] {
            padding: 0.05rem;
        }
        .chat-list .wechat-avatar .mui-row [class*=mui-col-xs-] img {
            max-width: 100%;
            width: 100%;
            display: block;
        }
        .chat-list .wechat-avatar,
        .chat-list .wechat-avatar > img {
            border-radius: 50%;
        }
        .chat-list .mui-media-body>.time{
            float: right;
            font-size: 0.9rem;
            color: #999999;
        }
        .chat-list .mui-media-body>p{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 0.9rem;
            color: #999999;
        }
        .redirectView{
        	cursor:pointer;
        }
        .mui-table-view .mui-table-view-cell .redPoint{
        	display: inline-block;
        	width: 10px;
        	height: 10px;
        	border-radius: 100%;
        	background: red;
        	position:absolute;
        	top:9px;
        	left:50px;
        }
     
    </style>
</head>

<body>
    <div class="mui-content">
    	<!-- 群聊列表 -->
    	<ul class="mui-table-view chat-list" id="content">
    		
    	</ul>
    </div>
</body>
<script id="test" type="text/html">
{{each list as value i}}
 <li class="mui-table-view-cell mui-media redirectView">
     {{if value.owner_icon}}
		 <img class="mui-media-object mui-pull-left" src="{{value.owner_icon}}"></img>
	 {{else}}
		 <img class="mui-media-object mui-pull-left" src="/chat/wxchat/static/images/demo6.png"></img>
	 {{/if}}  
     <div class="mui-media-body">
     		<span>{{value.owner_name}}&nbsp;{{value.owner_code}}</span>
          <span class="time">{{value.last_time}}</span>
          <p class="mui-ellipsis" id="{{value.owner_code}}">{{value.last_content}}</p>
 		  <input type="hidden" name="ownerCode"  value="{{value.owner_code}}"/>
		  {{if value.pointflag>0}}
		  	<span  class="redPoint"></span>
		  {{/if}}
     </div>
</li>
{{/each}}
</script>
<script src="/chat/wxchat/static/js/jquery-2.2.4.min.js"></script>
<script src="/chat/wxchat/static/js/mui.js"></script>
<script src="/chat/wxchat/static/js/template.js"></script>
<script src="/chat/wxchat/static/js/common.js?v=05110"></script>
<script src="/chat/wxchat/static/js/myStorage.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"> </script>
<script src="/chat/wxchat/message/jmessage-sdk-web.min.js"></script>
<script th:inline="javascript">
var id = [[${userInfo.id}]];
var wxCode=[[${userInfo.weixinCode}]];
var wxImess=[[${userInfo.imessageCode}]];
var dealerCode=[[${userInfo.dealerCode}]];
var checkFirst=[[${checkFirst}]];
var currPage=1;
var sizePage=3;
mui.init({
	gestureConfig:{
		   tap: true, //默认为true
		   doubletap: true, //默认为false
		   longtap: false, //默认为false
		   swipe: true, //默认为true
		   drag: true, //默认为true
		   hold:false,//默认为false，不监听
		   release:false//默认为false，不监听
		  }
});
(function($) {	
	document.addEventListener("swipedown",function(evt){
		stopBubble(evt);
		stopDefault(evt);
		/*<![CDATA[*/
		window.location.href=rootUrl+"/wx_chat_reload?wxCode="+wxCode;
		/*]]>*/
	});
})(mui);
$(function(){
	firstCheck();
	document.addEventListener("scroll",function(evt){
		 var scrolltop = $(document).scrollTop();
		 myStorage.setItem("list_scroll",scrolltop); 
	});
	//myStorage.clear();
	var b=isWx();
	if(b==1){
		//window.location.href="https://www.baidu.com";
	}
	addCustomer();
	bindTap(".mui-table-view .redirectView");
	
	var url=location.href.split('#')[0];
	weiAjax(url);
	getImSdk();
});

function firstCheck(){
	var f=myStorage.getItem("first_Go");
	if(f){
		if(checkFirst==f){
			return;
		}else{
			myStorage.setItem("list_scroll",0); 	
		}
	}else{
		//
		myStorage.setItem("list_scroll",0); 	
	}
	
}

function bindTap(_elements){
	myStorage.setItem("first_Go",checkFirst);
	$(_elements).on("tap", function(e){	
		var ownerCode=$(this).find("input[name=ownerCode]").val();
		/*<![CDATA[*/
		window.location.href=rootUrl+"/wx_chat?ownerCode="+ownerCode+"&userId="+id+"&wxCode="+wxCode+"&dealerCode="+dealerCode;
		/*]]>*/
	})
}
/*<![CDATA[*/
function addCustomer(){
	jQuery.ajax({ 
        type: "post",
        dataType: "json", 
        traditional:true,
        data: {userId:id },
        async:true,
        url: "/chat/wx/wx_chat_customer",
        success: function (data,textStatus) {
        	console.log(data);
            if (data) {
                	if(data.returnFlag==1){
                		var obj=new Object();
                		obj.list=data.data;
                		var len=data.data.length;
                		for(var i=0;i<len;i++){
                			var lastContent=data.data[i].last_content;
                			if(checkImage(lastContent)){
                				var reg=mess_reg;
                				lastContent=lastContent.replace(reg,"");
                				obj.list[i].last_content=lastContent;
                			}
                			var o=data.data[i].owner_code;
                			var co= myStorage.getItem(o);
                			if(co>0){
                				obj.list[i].pointflag=0;
                				myStorage.setItem(o, 0);
                				refrenTime(data.data[i].id);
                			}
                		}
                		var html = template('test', obj);
                		jQuery("#content").append(html);
                		bindTap(".mui-table-view .redirectView");
                		var ly=myStorage.getItem("list_scroll");
                		if(ly){
                			$(document).scrollTop(ly);
                		}      		
                	}else{
                		mui.toast(data.errorMsg);
	                }
        	}
        },
        error: function (e) {
        	mui.toast("网络异常");
        }
    });
}

function weiAjax(url){
	jQuery.ajax({ 
        type: "get",
        dataType: "json", 
        traditional:true,
        data: {url:url},
        async:true,
        url: "/chat/wx/wx_js_sdk",
        success: function (data,textStatus) {
            if (data) {
                	if(data.returnFlag==1){
                		weixin(data.data);    		
                	}else{
                		console.log(data.errorMsg);
	                }
        	}
        },
        error: function (e) {
        	console.log("网络异常");
        }
    });
}


function weixin(data){
	wx.config({
	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	    appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
	    timestamp:data.timestamp, // 必填，生成签名的时间戳
	    nonceStr:data.nonceStr, // 必填，生成签名的随机串
	    signature:data.signature,// 必填，签名，见附录1
	    jsApiList: ['getNetworkType'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	wx.error(function(res){
		console.log("wx:error"+JSON.stringify(res));
	});
	wx.ready(function(){
		 wx.hideOptionMenu();
	});
}

function refrenTime(cuId){
	jQuery.ajax({ 
        type: "get",
        dataType: "json", 
        traditional:true,
        data: {id:cuId},
        async:true,
        url: "/chat/wx/wx_updateTime",
        success: function (data,textStatus) {
            if (data) {
                	if(data.returnFlag==1){
                		//weixin(data.data);  
                		console.log(data);
                	}else{
                		console.log(data.errorMsg);
	                }
        	}
        },
        error: function (e) {
        	console.log("网络异常");
        }
    });
}
/*]]>*/
</script>

<script type="text/javascript">
var JIM = new JMessage({debug:false});
	
 function getImSdk(){
		jQuery.ajax({ 
	        type: "get",
	        dataType: "json", 
	        traditional:true,
	        async:true,
	        url: "/chat/wx/wx_im_sdk",
	        success: function (data,textStatus) {
	        	console.log(data);
	            if (data) {
	                	if(data.returnFlag==1){
	                		init(data.data);    		
	                	}else{
	                		console.log(data.errorMsg);
		                }
	        	}
	        },
	        error: function (e) {
	        	console.log("网络异常");
	        }
	    });
	}
	
	
function init(data){
	 JIM.init({
        "appkey": data.appkey,
        "random_str":data.random_str,
        "signature":data.signature,
        "timestamp":data.timestamp
    }).onSuccess(function(data) {
        console.log('success:' + "JIM.init");
        login();
    }).onFail(function(data) {
        console.log('error:' + JSON.stringify(data));
    });
}
/*<![CDATA[*/
function login() {
    JIM.login({
        'username' : wxImess,
        'password' : '123456'
    }).onSuccess(function(data) {
        console.log('success:' + "JIM.login");
        JIM.onMsgReceive(function(data) {
        	console.log(data);
        	if(data){
        		var ft=myStorage.getItem("timeOut"); 		
        		if(!ft){
        			setTimeout("refrenUrl()",10);
        			return ;
        		}
        		var t=new Date().getTime()-ft;
        		if(t<20000){
        			setTimeout("refrenUrl()",20000-t);
        		}else{
        			setTimeout("refrenUrl()",10);
        		}
        		
        	}
        });
        JIM.onEventNotification(function(data) {
            console.log('event_receive: ' + JSON.stringify(data));
        });
    }).onFail(function(data) {
        console.log('error:' + JSON.stringify(data));
    }).onTimeout(function(data) {
        console.log('timeout:' + JSON.stringify(data));
    });

}
/*]]>*/
function refrenUrl(){
	myStorage.setItem("timeOut", new Date().getTime()); 
	/*<![CDATA[*/
	window.location.href=rootUrl+"/wx_chat_reload?wxCode="+wxCode;
	/*]]>*/
}
</script>
</html>